function addStyleRule(rule, ruleIndex, sheetIndex) {
    var styleList = document.styleSheets;
    var addDom = function (domIndex, domParent) {
        var element = document.createElement("style");
        element.innerHTML = rule,
        domParent = domParent || document.head || document.querySelector("head");
        domIndex != null ? domParent.insertBefore(element, domParent.children[domIndex]) :
        domParent.appendChild(element);
    };
    var addRule = function (styleSheet) {
        var match = /^([^@{};]*((@[^{};]+;)|(@[^{};]+){(([^{}]+{[^{}]*}[^{}]*?)*)})|(([^{}]+){([^{}]*)}))(.*)/s;
        var ruleArray = [];
        var ruleMatch = rule.match(match);
        ruleIndex = ruleIndex != null ? ruleIndex : (styleSheet.cssRules || styleSheet.rules).length;
        if (!ruleMatch) return;
        var ruleMatchLast = ruleMatch[10];
        var ruleMatchLastMatch = ruleMatchLast.match(match);
        if (styleSheet.insertRule) {
            var ruleFirstArray = [];
            if (ruleMatch[3]) ruleFirstArray.push(ruleMatch[3]);
            else ruleArray.push(ruleMatch[1]);
            while (ruleMatchLast && ruleMatchLastMatch) {
                ruleMatchLastMatch[3] ? ruleFirstArray.push(ruleMatchLastMatch[3]) : ruleArray.push(ruleMatchLastMatch[1]);
                ruleMatchLast = ruleMatchLastMatch[10];
                ruleMatchLastMatch = ruleMatchLast.match(match);
            }
            ruleFirstArray.length > 0 && ruleFirstArray.forEach(function (r, i) { styleSheet.insertRule(r, i); });
            ruleArray.length > 0 && ruleArray.forEach(function (r, i) { styleSheet.insertRule(r, ruleIndex + i); });
        } else if (styleSheet.addRule) {
            if (!ruleMatch[3]) {
                var r_t = ruleMatch[4] && ruleMatch[5];
                ruleArray.push([r_t ? ruleMatch[4] : ruleMatch[8], r_t ? ruleMatch[5] : ruleMatch[9]]);
            }
            while (ruleMatchLast && ruleMatchLastMatch) {
                if (!ruleMatchLastMatch[3]) {
                    var r_t = ruleMatchLastMatch[4] && ruleMatchLastMatch[5];
                    ruleArray.push([r_t ? ruleMatchLastMatch[4] : ruleMatchLastMatch[8], r_t ? ruleMatchLastMatch[5] : ruleMatchLastMatch[9]]);
                }
                ruleMatchLast = ruleMatchLastMatch[10];
                ruleMatchLastMatch = ruleMatchLast.match(match);
            }
            ruleArray.length > 0 && ruleArray.forEach(function (r, i) { styleSheet.addRule(r[0], r[1], ruleIndex + i); });
        }
    };
    if (styleList.length > 0) {
        if (sheetIndex != null) {
            if (sheetIndex > styleList.length - 1) {
                sheetIndex = styleList.length - 1;
            } else if (sheetIndex < 0) {
                sheetIndex = styleList.length + sheetIndex < 0 ? 0 : styleList.length + sheetIndex;
            }
            if (styleList[sheetIndex].href) {
                var nextNode = styleList[sheetIndex].ownerNode;
                var domParent = nextNode.parentElement;
                for (var i = 0; i < domParent.children.length; i++) {
                    if (domParent.children[i] == nextNode) {
                        addDom(i, domParent);
                        break;
                    }
                }
            } else addRule(styleList[sheetIndex]);
        } else {
            for (var i = styleList.length - 1; i >= 0; i--) {
                if (!styleList[i].href) {
                    addRule(styleList[i]);
                    break;
                }
            }
        }
    } else addDom();
}
function frameAnime_init() {
    var onSytle = [];
    var addCss = "";
    var animeClass = document.querySelectorAll(".frameAnime[class*='_x'], .frameAnime[class*='_y']");
    animeClass.forEach(function (e) {
        var match = e.className.match(/(_(x|y)[1-9][0-9]*)/i);
        if (match && !onSytle.includes(match[1]) && e.classList.contains(match[1])) onSytle.push(match[1].toLowerCase());
    });
    onSytle.forEach(function (v) {
        var part = [];
        var dir = v.substr(1, 1);
        var num = parseInt(v.substr(2));
        var css =
            ".frameAnime." + v + "{--frame-" + (dir == "x" ? "y" : "x") + ":" + num + ";" +
            "--w:calc(var(--size)*var(--wh-w)*var(--frame-" + (dir == "x" ? "y" : "x") + "));" +
            "--h:calc(var(--size)/var(--wh-h)*var(--frame-" + (dir == "x" ? "y" : "x") + "));" +
            (dir == "y" ? "--bx:0;--by:1;" : "") +
            "animation:frameAnime-self" + v + " calc(1s/(var(--step)/var(--frame-" + dir + ",var(--frame)))) " +
            "steps(var(--frame-" + dir + ",var(--frame))) var(--iteration-self)," +
            "frameAnime-move calc(1s/(var(--step)/var(--frame-" + dir + ",var(--frame)))) " +
            "steps(var(--frame-" + dir + ",var(--frame))) var(--iteration-move);}@keyframes frameAnime-self" + v + "{";
        for (var i = 0; i < num; i++) {
            part.push(1 * i / num);
        }
        part.forEach(function (p, i) {
            css += (i == 0 ? "0" : (p * 100 + 0.001).toFixed(3)) + "%," + ((part[i + 1] || 1) * 100).toFixed(3) + "%{--a-self" + v + ":" + p + ";}";
        });
        part.forEach(function (p, i) {
            if (i == 0) return;
            css += (p * 100 + 0.001).toFixed(3) + "%" + (i == part.length - 1 ? "" : ",");
            if (i == part.length - 1) {
                css += "{background-position:" +
                (dir == "x" ? "0" : ("calc(var(--un)*var(--w)*var(--a-self" + v + ")*-1)")) + " " +
                (dir == "y" ? "0" : ("calc(var(--un)*var(--h)*var(--a-self" + v + ")*-1)")) + ";}";
            }
        });
        part.forEach(function (p, i) {
            if (i == 0) return;
            css += (p * 100).toFixed(3) + "%" + (i == part.length - 1 ? ", 100% " : ", ");
            if (i == part.length - 1) {
                css += "{background-position:" +
                (dir == "x" ? "calc(var(--un)*var(--w)*-1)" : "calc(var(--un)*var(--w)*var(--a-self" + v + ")*-1)") + " " +
                (dir == "y" ? "calc(var(--un)*var(--h)*-1)" : "calc(var(--un)*var(--h)*var(--a-self" + v + ")*-1)") + ";}}";
            }
        });
        addCss += css;
    });
    addStyleRule(addCss, 0, 0);
}